<template>
  <el-input v-model="queryParams.id"></el-input>
  <el-input v-model="queryParams.username"></el-input>
  <el-input v-model="queryParams.name"></el-input>
  <el-select v-model="queryParams.gender" placeholder="Select" style="width: 240px">
    <el-option
        v-for="item in genderSelect"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
  <el-input v-model="queryParams.phone"></el-input>
  <el-input v-model="queryParams.email"></el-input>

  <el-button @click="query">查询</el-button>

  <el-table :data="userList" border style="width: 100%">
    <el-table-column prop="avatarUrl" label="Date" width="180" />
    <el-table-column prop="id" label="Date" width="180" />
    <el-table-column prop="username" label="Name" width="180" />
    <el-table-column prop="name" label="Address" />
    <el-table-column prop="gender" label="Address" />
    <el-table-column prop="phone" label="Address" />
    <el-table-column prop="email" label="Address" />
    <el-table-column prop="createTime" label="Address" />
    <el-table-column prop="updateTime" label="Address" />
  </el-table>


</template>

<script>
import axios from "axios";

export default {
  name: "UserList",
  data(){
    return{
      queryParams:{
        id : '',
        username:'',
        name:'',
        gender:'',
        phone:'',
        email:'',
      },
      genderSelect:[
        {
          label:'男',
          value:'1'
        },
        {
          label:'女',
          value:'0'
        }
      ],
      userList:[],
    }
  },
  methods:{
    query(){
      console.log(this.queryParams)
      axios.post('http://localhost:8088/query/user',this.queryParams,{withCredentials:true})
          .then(res => {
            this.userList = res.data.data;
          })
    }
  }
}
</script>

<style scoped>

</style>